<template>
  <div class="index-container">
    <div class="table-container">
      <a-table :rowKey="config.rowkey" :pagination="false" :columns="header" :data-source="data"
        :loading="config.loading" :bordered="config.isBorder" :row-selection="config.isSelection ? rowSelection : null"
        :scroll="{ y: 'calc(100vh - 256px)' }">


        <template #bodyCell="{ column, record, index }">
          <!-- （复杂样式使用插槽） -->

          <!-- <template v-if ="column.dataIndex === 'state'">
        <a-tag>{{ record.state===1?'成功':'失败' }}</a-tag>
        </template> -->

          <!-- （复杂样式使用插槽） -->

          <template v-if="column.dataIndex === 'operation'">
            <a-tag color="#2db7f5" size="small" type="primary" danger @click="onEditRow(record)">编辑</a-tag>
            <a-popconfirm title="是否删除?" @confirm="onDelRow(record.id)">
              <a-tag color="#108ee9" class="ml-1" size="small" type="primary" danger>删除</a-tag>
            </a-popconfirm>
          </template>
        </template>
      </a-table>
    </div>
    <div class="pagination-container">
      <a-pagination show-size-changer :current="state.page.pageNum" :pageSize="state.page.pageSize"
        :total="config.total" @change="onHandleCurrentChange" @showSizeChange="onHandleSizeChange" />

    </div>
  </div>
</template>

<script lang='ts' setup>
import { ref, reactive } from 'vue';

const props = defineProps({
  // 列表内容
  data: {
    type: Array,
    default: () => [],
  },
  // 表头内容
  header: {
    type: Array,
    default: () => [],
  },
  // 配置项
  config: {
    type: Object,
    default: () => { },
  },
});

const state = reactive({
  page: {
    pageNum: 1,
    pageSize: 10,
  },
  selectlist: []
});

const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    state.selectlist = selectedRows
    emit('selectCol', state.selectlist);
  },
};

const emit = defineEmits(['delRow', 'editRow', 'pageChange', 'sortHeader', 'selectCol']);

const onDelRow = (row) => {
  emit('delRow', row);
};

const onEditRow = (row) => {
  emit('editRow', row);
};

const onHandleSizeChange = (current: number, size: number) => {
  state.page.pageSize = size;
  emit('pageChange', state.page);
};

const onHandleCurrentChange = (current: number, size: number) => {
  state.page.pageNum = current;
  emit('pageChange', state.page);
};
</script>
<style scoped lang='less'>
.index-container {
  display: flex;
  flex-direction: column;

  height: calc(100vh - 146px);

  .table-container {
    flex: 12;
  }

  .pagination-container {
    flex: 1;
    padding-top: 15px;
  }
}
</style>